<template>
  <div class="container">
    <div class="app-container">
      <template>
        <el-row>
          <el-button style="margin-top: 15px;margin-left: 20px;border-radius: 5px;" type="primary" size="mini">添加区域</el-button>
        </el-row>
        <el-table v-loading="loading" :data="list">
          <el-table-column align="center" label="序号" type="index" />
          <el-table-column align="center" label="区域名称" prop="areaName" />
          <el-table-column align="center" label="车位数（个）" prop="spaceNumber" />
          <el-table-column align="center" label="面积（㎡）" prop="areaProportion" />
          <el-table-column align="center" label="计费规则" prop="ruleName" />
          <el-table-column align="center" label="备注" prop="remark" />
          <el-table-column align="center" label="操作">
            <template>
              <el-button type="text" size="mini">编辑</el-button>
              <el-button type="text" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-pagination
            :page-sizes="[10,20,50,100]"
            :page-size="pageParams.pagesize"
            :current-page="pageParams.page"
            :total="pageParams.total"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="changePage"
            @size-change="changecurrent"
          />
        </el-row>
      </template>
    </div>
  </div>
</template>
<script>
import { getAreaListAPI } from '@/api'

export default {
  name: 'AreaManagement',
  data() {
    return {
      loading: false,
      pageParams: {
        page: 1,
        pagesize: 10,
        total: 0
      },
      list: []
    }
  },
  created() {
    this.getAreaList()
  },
  methods: {
    async changePage(newPage) {
      this.loading = true
      this.pageParams.page = newPage // 赋值当前页码
      await this.getAreaList()
      this.loading = false
    },
    async changecurrent(newcurrent) {
      this.loading = true
      this.pageParams.pagesize = newcurrent
      await this.getAreaList()
      this.loading = false
    },
    async getAreaList() {
      this.loading = true
      const { rows, total } = await getAreaListAPI(this.pageParams)
      this.list = rows
      this.pageParams.total = total
      this.loading = false
    }
  }
}
</script>
